<!--仓库出库签收-->
<template>
  <div ref="container">
    <a-modal
      :title="title"
      :width="500"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :getContainer="() => $refs.container"
      :maskStyle="{'top':'93px','left':'154px'}"
      :wrapClassName="wrapClassNameInfo()"
      :mask="isDesktop()"
      :maskClosable="false"
      @cancel="handleCancel"
      @ok="sign"
      style="top:35%;height: 50%;">
      <template slot="footer">
        <a-button key="back" @click="handleCancel">{{$t('button.cancel')}}</a-button>
        <a-button type="primary" key="submit" @click="sign">{{$t('button.sign')}}</a-button>
      </template>
      <a-spin :spinning="confirmLoading">
        <a-row class="form-row" :gutter="24">
          <a-col :md="24" :sm="24">
            <p :labelCol="labelCol" :wrapperCol="wrapperCol">{{$t('placeholder.pleaseUploadCustomerSign')}}</p>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="24">
          <a-col :md="24" :sm="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.billAttachment')">
              <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader"
                        :customRequest="customUpload" :fileList="fileList">
                <!--                @change="handleImportExcel"-->
                <a-button icon="import">{{$t('button.upload')}}</a-button>
              </a-upload>

              <ul v-if="fileList.length > 0">
                <li v-for="(file, index) in fileList" :key="index">
                  <a @click.prevent="previewFile(file)">{{ file.name }}</a>
                  <img v-if="file.type === 'image'" :src="file.thumbUrl" alt="上传的图片"
                       style="width: 50px; height: 50px;">
                </li>
              </ul>
            </a-form-item>
          </a-col>
        </a-row>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {mixinDevice} from '@/utils/mixin'
import {postAction} from '@api/manage'

export default {
  name: 'SaleOutSignModal',
  mixins: [JeecgListMixin, mixinDevice],
  data() {
    return {
      title: '仓库出库-签收',
      visible: false,
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 18}
      },
      confirmLoading: false,
      disableMixinCreated: true,
      url: {
        signUploadUrl: '/depotHead/saleOutSign'
      },
      fileList: [],
      id: null
    }
  },
  created() {
    this.title = this.$t('title.warehouseOutSign')
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}${this.url.uploadUrl}`
    }
  },
  methods: {
    show(id) {
      this.id = id
      this.visible = true
      this.fileList = []
    },
    customUpload({file, onSuccess, onError}) {
      this.confirmLoading = true
      // 将文件存储在 fileList 中,保持只有一个最新的文件
      if (this.fileList.length === 1) {
        this.fileList.pop()
      }
      this.fileList.push(file)
      this.confirmLoading = false
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },

    sign() {
      if (this.fileList.length !== 1) {
        this.$message.error(this.$t('message.pleaseUploadFile'))
        return
      }

      // 调用上传 API
      var that = this
      this.$confirm({
        title: this.$t('title.confirmOperation'),
        content: this.$t('placeholder.confirmWarehouseOutSign'),
        onOk: function () {
          that.confirmLoading = true
          const formData = new FormData()
          formData.append('file', that.fileList[0])
          formData.append('id', that.id)
          postAction(that.url.signUploadUrl, formData).then((res) => {
            if (res.code === 200) {
              that.$message.info(that.$t('message.signSuccess'))
              that.close()
              that.fileList = []

            } else {
              that.$message.warning(res.data.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.visible = false
          })
        }
      })
    },
    previewFile(file) {
      if (file.type.startsWith('image')) {
        // 预览图片
        const img = new Image()
        img.src = file.thumbUrl
        const imgWidth = img.width
        const imgHeight = img.height
        const previewModal = this.$modal.info({
          title: this.$t('title.preview'),
          content: `<img src="${file.thumbUrl}" alt="预览" style="width: ${imgWidth}px; height: ${imgHeight}px;">`,
          okText: this.$t('button.close'),
          cancelText: ''
        })
      } else {
        console.log(file.type)
        // 预览其他文件类型
        const fileUrl = URL.createObjectURL(file)
        const a = document.createElement('a')
        a.href = fileUrl
        a.download = file.name
        a.click()
      }
    }
  }
}
</script>

<style scoped>

</style>